<template>
    <el-header height="auto" style=" background-color: white;padding: 30px 10% 20px 10%;">
        <div style="display: flex">
            <el-avatar style="width: 150px; height: 150px;border-radius: 5%" fit="cover" shape="square" :size="75">
                <el-image v-if="project.info.logo" :src="project.info.logo"/>
                <el-image v-else>
                    <template #error>
                        <el-icon style="width: 2.5em;height: 1.5em" size="25">Logo</el-icon>
                    </template>
                </el-image>
            </el-avatar>
            <div style="margin-left: 20px;display:flex;flex-flow: column;justify-content: space-between">
                <h1>{{ project.info.name }}</h1>
                <div style="display:flex;flex-flow: row;align-items: center;">
                    <h4>{{ project.info.types }}</h4>
                    <h4 style="margin-left: 1rem">{{ GRADE[project.info.grade] }}</h4>
                </div>
                <h4>{{ project.info.batch }}</h4>
                <div>
                    <el-tag style="margin-right: 10px" v-for="type in project.info.tags">{{ type }}</el-tag>
                </div>
            </div>
        </div>
    </el-header>
    <el-affix>
        <el-header height="auto" style="background-color: white;padding: 0 10%;">
            <el-tabs class="demo-tabs" stretch v-loading.fullscreen.lock="loading"
                     v-model="tab" @tab-click="tabPane => tab = tabPane.paneName">
                <el-tab-pane name="info">
                    <template #label>
                        <span class="custom-tabs-label">
                            <el-icon size="20"><Memo/></el-icon>
                            <span>项目信息</span>
                        </span>
                    </template>
                </el-tab-pane>
                <el-tab-pane name="team">
                    <template #label>
                        <span class="custom-tabs-label">
                            <el-icon size="20"><UserFilled/></el-icon>
                            <span>团队信息</span>
                        </span>
                    </template>
                </el-tab-pane>
                <el-tab-pane
                    v-if="authority"
                    name="receipt">
                    <template #label>
                        <span class="custom-tabs-label">
                            <el-icon size="20"><Money/></el-icon>
                            <span>发票报销</span>
                        </span>
                    </template>
                </el-tab-pane>
                <!--                <el-tab-pane name="match">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20"><TrophyBase/></el-icon>-->
                <!--                            <span>参赛信息</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane name="article">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20"><Tickets/></el-icon>-->
                <!--                            <span>论文发表</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane name="award">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20"><Medal/></el-icon>-->
                <!--                            <span>获奖情况</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane name="patent">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20"><StarFilled/></el-icon>-->
                <!--                            <span>专利情况</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane name="copyright">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20">&copy;</el-icon>-->
                <!--                            <span>著作权</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane name="trademark">-->
                <!--                    <template #label>-->
                <!--                        <span class="custom-tabs-label">-->
                <!--                            <el-icon size="20">®</el-icon>-->
                <!--                            <span>注册商标</span>-->
                <!--                        </span>-->
                <!--                    </template>-->
                <!--                </el-tab-pane>-->
            </el-tabs>
        </el-header>
    </el-affix>
    <el-main>
        <el-card>
            <KeepAlive>
                <component :is="tabsComponent[tab]" :dataInfo="project[tab]" :authority="authority"></component>
            </KeepAlive>
        </el-card>
    </el-main>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {Memo, Money, UserFilled} from "@element-plus/icons-vue";
import Info from "@/views/Preview/Project/components/Info.vue";
import Match from "@/views/Preview/Project/components/Match.vue";
import Team from "@/views/Preview/Project/components/Team.vue";
import Patent from "@/views/Preview/Project/components/Patent.vue";
import Article from "@/views/Preview/Project/components/Article.vue";
import Award from "@/views/Preview/Project/components/Award.vue"
import Copyright from "@/views/Preview/Project/components/Copyright.vue";
import Trademark from "@/views/Preview/Project/components/Trademark.vue";
import {getProjectInfoByIdApi} from "@/apis/preview";
import Receipt from "@/views/Preview/Project/components/Receipt.vue";
import {getHostProjectStudentApi, getInvolveProjectStudentApi} from "@/apis/studentInvolveProject";
import {getHostInstructorByProjectIdApi, getInvolveProjectInstructorApi} from "@/apis/instructorInvolveProject";
import {getReceiptListByProjectIdApi} from "@/apis/receiptManage";
import {getAccountByIdApi} from "@/apis/account";
import {getProjectFileById} from "@/apis/project";
import {getProjectGrade} from "@/apis/enum";
import {useUserStore} from "@/stores/user";

const GRADE = getProjectGrade();
const userStore = useUserStore()


const props = defineProps(["id"])
let loading = ref(true)
let tabsComponent = {
    info: Info,
    match: Match,
    team: Team,
    receipt: Receipt,
    patent: Patent,
    article: Article,
    award: Award,
    copyright: Copyright,
    trademark: Trademark
}
let project = reactive({
    info: {},
    match: {}, //比赛接口有了删
    article: {},
    award: {},
    patent: {},
    copyright: {},
    trademark: {},
});
let tab = ref('info')
//权限校验
const authority = ref(false)

onMounted(async () => {
    project.info = (await getProjectInfoByIdApi(props.id)).data
    // console.log("项目基本信息", project.info)
    //比赛接口
    // project.match =  (await getMatchInfoByIdApi(props.id)).data.data
    //收集账号id用于权限判断
    let studentAccountIdList = []
    //整合学生和账号信息
    let studentList = []
    let hostStudent = (await getHostProjectStudentApi(props.id)).data
    let hostStudentAccount = (await getAccountByIdApi(hostStudent.userId)).data
    hostStudent.telephone = hostStudentAccount.telephone
    hostStudent.email = hostStudentAccount.email
    studentAccountIdList.push(hostStudentAccount.id)
    studentList.push(hostStudent)
    let involveStudentList = (await getInvolveProjectStudentApi(props.id)).data
    for (let index = 0; index < involveStudentList.length; index++) {
        let involveStudentAccount = (await getAccountByIdApi(involveStudentList[index].userId)).data
        involveStudentList[index].telephone = involveStudentAccount.telephone
        involveStudentList[index].email = involveStudentAccount.email
        studentList.push(involveStudentList[index])
        studentAccountIdList.push(involveStudentAccount.id)
    }
    // console.log("学生全部信息",studentList)
    project.info.hostStudent = hostStudent.name
    project.info.studentNumber = studentList.length
    //设置查看发票报销的权限
    //整合指导教师和账号信息
    let instructorAccountIdList = []
    let instructorList = []
    let hostInstructor = (await getHostInstructorByProjectIdApi(props.id)).data
    let hostInstructorAccount = (await getAccountByIdApi(hostInstructor.userId)).data
    hostInstructor.telephone = hostInstructorAccount.telephone
    hostInstructor.email = hostInstructorAccount.email
    instructorList.push(hostInstructor)
    instructorAccountIdList.push(hostInstructorAccount.id)
    project.info.hostInstructor = hostInstructor.name
    let involveInstructorList = (await getInvolveProjectInstructorApi(props.id)).data
    for (let index = 0; index < involveInstructorList.length; index++) {
        let involveInstructorAccount = (await getAccountByIdApi(involveInstructorList[index].userId)).data
        involveInstructorList[index].telephone = involveInstructorAccount.telephone
        involveInstructorList[index].email = involveInstructorAccount.email
        instructorList.push(involveInstructorList[index])
        instructorAccountIdList.push(involveInstructorAccount.id)
    }
    // console.log("指导老师全部信息",instructorList)
    /**
     *  权限校验
     *      1. 学校端都可以查看
     *      2. 指导老师可以查看指导的项目
     *      3. 项目成员可以查看项目
     *      4. 其他的只能查看项目的非敏感信息
     */
    if (userStore.account.authority === 1) authority.value = true
    else if (userStore.account.authority === 2) {
        for (const id of instructorAccountIdList) {
            if (id === userStore.id) {
                authority.value = true
                break
            }
        }
    } else if (userStore.account.authority === 3) {
        for (const id of studentAccountIdList) {
            if (id === userStore.id) {
                authority.value = true
                break
            }
        }
    }
    //权限校验成功
    if (authority.value) {
        //查询项目文件
        project.info.resourceFileList = (await getProjectFileById(props.id)).data.map(value =>{
            return {url:value,filename:decodeURI(value.slice(value.lastIndexOf("/")+1))}
        })
        // console.log(project.info.resourceFileList)
        //查询项目发票报销
        project.receipt = (await getReceiptListByProjectIdApi(props.id)).data.map(value => {
            return {...value, isPdf: value.img.includes(".pdf"), loading: true}
        })
        // console.log(project.receipt)
    }
    project.team = {
        studentList,
        instructorList
    }
    console.log(project)
// project.article =  (await getArticleInfoByIdApi(props.id)).data
// project.award =  (await getAwardInfoByIdApi(props.id)).data
// project.patent =  (await getPatentInfoByIdApi(props.id)).data
// project.copyright =  (await getCopyrightInfoByIdApi(props.id)).data
// project.trademark =  (await getTrademarkInfoByIdApi(props.id)).data
    loading.value = false
})
</script>

<style scoped>
.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
    font-size: 16px;
    font-weight: bold;
}
</style>
